<template>
 
  <div>
    <div
    :class="{bass: true, active: index == activeIndex}"
    v-for="(item,index) in list"
    :key="item"
    @click="checkIndex(index)"
    >
    {{ item }}
    </div>
  </div>

  
</template>
<script>
export default {
  data() {
    return {
        activeIndex: 0,
        list:[1,2,3,4,5,6],
    };
},

}
//      

  methods: {
    checkIndex(index){
        this.activeIndex = index;
    },
}
</script>
<style scoped>
.app{
    width: 100vw;
    height: 100vh;
    background-color: skyblue;
}
.base{
    color: pink;
}
.active{
    color: black;
}
.active_1{
    color:red !important
}
.active_2{
    color:blue !important
}
.active_3{
    color: skyblue !important
}
</style>